<template>
	<view class="recommend">
		<view class="item" v-for="(item, index) in courseData" :key="index" @click="itemHandle(item.course_id)">
			<image class="item-img" :src="item.course_info.top_img"></image>
			<view class="item-summary">{{item.course_info.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			courseData: Array
		},
		methods: {
			itemHandle (id) {
				uni.navigateTo({
					url: '/pages/course/course?id=' + id
				})
			}
		}
	}
</script>

<style>
	.recommend{
		width: 710rpx;
		margin: 0 auto;
		background-color: #F5F8F5;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.item {
		width: 345rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		font-size: 24rpx;
		border-radius: 16rpx;
	}
	.item-img{
		width:345rpx;
		height: 345rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}
	.item-summary{
		line-height: 80rpx;
		width: 315rpx;
		margin: 0 auto;
	}
</style>
